import 'swiper/css';
import {CardListType} from '../types';
import { useNavigate } from 'react-router-dom';
type CardPropsType = {
    title: string;
    list: CardListType | undefined;
}
const Card = (props: CardPropsType)=>{
    const {title, list} = props;
    const navigate = useNavigate()
    function handleItemClick(productId: string){
        navigate(`/detail/${productId}`)
    }
    return (
        <div className="card">
            <h3 className="card-title">
                <img src="http://statics.dell-lee.com/shopping/hot.png" alt={title} className="card-title-img" />
                <p>{title}</p>
                <div className="card-title-more">更多<span className="iconfont">&#xe614;</span></div>
            </h3>
            <div className="card-content">
                {
                    (list || []).map((item) => {
                    return (
                        <div className="card-content-item" key={item.id} onClick={()=>{handleItemClick(item.id)}}>
                        <img className="card-content-item-img" src={item.imgUrl} alt={item.name} />
                        <p className="card-content-item-desc">{item.name}</p>
                        <div className="card-content-item-price">
                            <span className='card-content-item-yen'>&yen;</span>
                            {item.price}
                            <span className="iconfont">&#xe6c6;</span>
                        </div>
                        </div>
                    )
                    })
                }
            </div>
      </div>
    )
}
export default Card;